<template>
  <div id="app">
    <el-container>
      <el-aside width="200px" style="background-color: #304156;" 
	  :style="{width:!isCollapse?'200px':'64px'}">
		  <el-row class="tac">
		    
		    <el-col :span="24">
		      <h5 v-if="!isCollapse" style="display: flex;align-items: center;justify-content: center;"> 
				  <img src="../assets/logo.png" alt="1" style="width: 50px;height: 50px;">
				  <span style="color: white;font-size: 16px;">云教育管理后台</span>
				  
			  </h5>
			  <h5 v-else style="display: flex;align-items: center;justify-content: center;">
			  	<img src="../assets/logo.png" alt="1" style="width: 30px;height: 30px;">
			  				    
			  </h5>
		      <el-menu
		        default-active="2"
		        class="el-menu-vertical-demo"
		        @open="handleOpen"
		        @close="handleClose"
		        background-color="#304156"
		        text-color="#fff"
		        active-text-color="#409EFF"
				:collapse="isCollapse"
				>
		        <el-submenu index="1">
		          <template slot="title">
		            <i class="el-icon-location"></i>
		            <span>系统管理</span>
		          </template>
				  <el-menu-item index="1-4-1" @click="goto('/')">
					  
					  基本设置</el-menu-item>
				  <el-menu-item index="1-4-2"  @click="goto('/user')">会员管理</el-menu-item>
				  <el-menu-item index="1-4-3"  @click="goto('/level')">等级管理</el-menu-item>
		          <!-- <el-menu-item-group>
		            <template slot="title">分组一</template>
		            <el-menu-item index="1-1">选项1</el-menu-item>
		            <el-menu-item index="1-2">选项2</el-menu-item>
		          </el-menu-item-group>
		          <el-menu-item-group title="分组2">
		            <el-menu-item index="1-3">选项3</el-menu-item>
		          </el-menu-item-group> -->
		         <!-- <el-submenu index="1-4">
		            <template slot="title">选项4</template>
		            <el-menu-item index="1-4-1">选项1</el-menu-item>
		          </el-submenu> -->
		        </el-submenu>
		        <el-menu-item index="2">
		          <i class="el-icon-menu"></i>
		          <span slot="title">导航二</span>
		        </el-menu-item>
		        <el-menu-item index="3" disabled>
		          <i class="el-icon-document"></i>
		          <span slot="title">导航三</span>
		        </el-menu-item>
		        <el-menu-item index="4">
		          <i class="el-icon-setting"></i>
		          <span slot="title">导航四</span>
		        </el-menu-item>
		      </el-menu>
		    </el-col>
		  </el-row>
		  
	  </el-aside>
      <el-container>
        <el-header style="display: flex;justify-content: space-between;align-items: center;">
			<div style="display: flex;">
				<i  v-if="!isCollapse" class="el-icon-s-fold" @click="changeCollapse"></i>
				<i  v-else class="el-icon-s-unfold" @click="changeCollapse"></i>
				<el-breadcrumb separator="/">
				  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
				  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
				  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div>
				
				<el-dropdown>
				  <span class="el-dropdown-link">
				    <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
					<i class="el-icon-arrow-down el-icon--right"></i>
				  </span>
				  <el-dropdown-menu slot="dropdown">
				    <el-dropdown-item>个人信息</el-dropdown-item>
				    <el-dropdown-item>修改密码</el-dropdown-item>
				   
				    <el-dropdown-item divided>退出登录</el-dropdown-item>
				  </el-dropdown-menu>
				</el-dropdown>
			</div>
			
		</el-header>
        <el-main>
			
			<!-- 路由容器 -->
			<router-view></router-view>
			
		</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
*{
	margin: 0;
	padding: 0;
}
html,body,#app,section,aside{
	height:100%;
}

</style>

<script>
  export default {
    data () {
      return {
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        isCollapse:false
      }
    },
	methods:{
		changeCollapse(){
			this.isCollapse = !this.isCollapse;
		},
		goto(url){
			this.$router.push(url)
		}
	}
  }
</script>
